<!--
 * @Author: Seon.Hu SeonHu@126.com
 * @Date: 2023-03-15 16:26:40
 * @LastEditors: Seon.Hu SeonHu@126.com
 * @LastEditTime: 2023-11-22 09:00:36
 * @FilePath: \bg-vben\src\components\AdList\src\components\settings\FullScreenSetting.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <Tooltip placement="top">
    <template #title>
      <span>{{ t('component.table.settingFullScreen') }}</span>
    </template>
    <FullscreenOutlined @click="toggle" v-if="!isFullscreen" />
    <FullscreenExitOutlined @click="toggle" v-else />
  </Tooltip>
</template>
<script lang="ts" setup>
  import { Tooltip } from 'ant-design-vue';
  import { FullscreenOutlined, FullscreenExitOutlined } from '@ant-design/icons-vue';
  import { useFullscreen } from '@vueuse/core';
  import { useI18n } from '@/hooks/web/useI18n';
  import { useListContext } from '../../hooks/useListContext';

  const list = useListContext();
  const { t } = useI18n();
  const { toggle, isFullscreen } = useFullscreen(list.wrapRef);
</script>
